import React from 'react'
import {Divider, Popover, Switch, Table} from "antd";
import {withRouter} from "react-router-dom"
import {connect} from 'react-redux'
import {getQuizSuggestions, markAsSolved} from "../../actions/quiz-suggestion";
import {FormattedMessage} from "react-intl";
import {TwsReactMarkdownPreview} from 'tws-antd'
import {convertContent} from "../../constant/lang-util";

const QUIZ_TYPE = {
  'SUBJECTIVE_QUIZ':'subjectiveQuizzes',
  'SINGLE_CHOICE':'singleChoiceQuizzes',
  'MULTIPLE_CHOICE':'multipleChoiceQuizzes',
  'BASIC_BLANK_QUIZ':'blankQuizzes',
  'SURVEY_QUIZ':'surveyQuizzes',
  'HOMEWORK_QUIZ':'codingQuizzes',
  'SIMPLE_CODING_QUIZ':'simpleCodingQuizzes',
  'ONLINE_LANGUAGE_QUIZ':'onlineLanguageQuizzes',
}

class QuizSuggestionBody extends React.Component{
  componentDidMount = () =>{
    this.props.getQuizSuggestions()
  }

  toUpdateQuizPage = quizSuggestion => {
    const {type,quizId} = quizSuggestion
    this.props.history.push(`/${QUIZ_TYPE[type]}/${quizId}/editor`)
  }

  render() {
    const {quizSuggestions} = this.props
    const columns = [{
      title: <FormattedMessage id='题目' />,
      dataIndex: 'id',
      render: (id,record) => {
        return <a onClick={()=>this.toUpdateQuizPage(record)}>查看题目</a>
      }
    }, {
      title: <FormattedMessage id='建议' />,
      dataIndex: 'content',
      render: content=>{
        return <Popover content={<TwsReactMarkdownPreview source={content}/>}>
          {content.substring(0,20)}
          {content.length > 20 ? <a><Divider type='vertical'/>查看全部</a> : ''}
        </Popover>
      }
    }, {
      title: <FormattedMessage id='标注为解决' />,
      dataIndex: 'solved',
      render: (solved,record) =>{
        return <Switch
                onChange={() => this.props.markAsSolved(record.id)}/>
      }
    }]
    return <div>
      <Table dataSource={quizSuggestions}
             bordered
             pagination={false}
             locale={{emptyText:convertContent('当前没有学员对作业的建议反馈')}}
             columns={columns} />
    </div>
  }
}
const mapStateToProps = ({quizSuggestions}) => ({
  quizSuggestions
})

const mapDispatchToProps = dispatch => ({
  getQuizSuggestions: () => dispatch(getQuizSuggestions()),
  markAsSolved: (id) => dispatch(markAsSolved(id))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(QuizSuggestionBody))
